<template>
  <el-container
    class="mycontainer"
    :style="{ height: browserHeight + 'px' }"
    style="min-height: 500px"
  >
    <!-- <el-aside class="mycontainer-aside" :style="{ height: browserHeight + 'px' }" width="auto">
      <Aside />
    </el-aside> -->
    <el-aside class="mycontainer-aside" style="width: 60px" width="auto">
      <el-scrollbar style="height: 100%; width: 60px">
        <AsideSSY />
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header
        class="mycontainer-header"
        v-if="
          activeIndex != 'HR' &&
          activeIndex != 'HRTwo' &&
          activeIndex != 'HRThree'
        "
      >
        <Header />
      </el-header>
      <el-main
        class="mycontainer-main"
        :class="
          activeIndex == 'HR' ||
          activeIndex == 'HRTwo' ||
          activeIndex == 'HRThree'
            ? 'hrmain'
            : ''
        "
      >
        <!-- 如果当前打开页面的路由中 keepAlive: true （开启了缓存时） -->
        <keep-alive>
          <router-view
            v-if="$route.meta.keepAlive"
            :key="$route.path"
          ></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from "@/views/Container/Header";
import Aside from "@/views/Container/Aside";
import AsideSSY from "@/views/Container/AsideSSY";
import TagList from "@/views/Container/TagList";

export default {
  components: {
    Header,
    Aside,
    AsideSSY,
    TagList,
  },
  data() {
    return {
      browserHeight: 0,
      activeIndex: "",
    };
  },
  mounted() {
    let that = this;
    that.browserHeight = document.documentElement.clientHeight;
    window.onresize = function () {
      that.browserHeight = document.documentElement.clientHeight;
    };
    this.activeIndex = this.$route.matched[1].name;
  },
  updated() {
    this.activeIndex = this.$route.matched[1].name;
  },
};
</script>

<style lang="scss" scoped>
.hrmain {
  padding: 0 !important;
  margin: 0 !important;
}
.mycontainer {
  &-aside {
    background: #2c70d6;
  }
  &-header {
    // background: #ffffff;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 62px !important;
    box-shadow: 0 4px 11px 0 rgba($color: #7a62f5, $alpha: 0.08);
  }
  &-main {
    height: calc(100vh - 62px);
    border-top: 1px solid #efefef;
    background: #f0f1f7;
    padding: 0;
    /deep/ .el-table th {
      user-select: initial;
    }
  }
}
</style>